<template>
  <demo-section>
    <demo-block title="基础用法">
      <div class="rect-618">
        <chart :data="data1" class="_full" />
      </div>
    </demo-block>

    <demo-block title="图表类型">
      <div class="rect-618">
        <chart :data="data2" chartType="line" class="_full" />
      </div>
    </demo-block>
  </demo-section>
</template>

<script>
import '../../__support/demo.css';

export default {
  data() {
    return {
      data1: [
        {
          label: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
      ],
      data2: [
        {
          label: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          value: [
            12.0, 14.9, 17.0, 23.2, 55.6, 76.7, 135.6, 162.2, 135.6, 162.7,
            135.2, 162.6,
          ],
        },
      ],
      data3: [
        {
          label: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 82.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
        {
          label: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          value: [
            13.0, 26.9, 37.0, 24.2, 35.6, 79.7, 82.6, 109.2, 62.6, 30.0, 16.4,
            13.3,
          ],
        },
      ],
      colors: [
        ['#286BF1', '#5CA4F8'],
        ['#FAD961', '#FAD961'],
      ],
      colors2: [
        ['rgba(43,95,212,0.65)', 'rgba(58,156,235,0.1)', 'rgba(43,95,212,1)'],
        ['rgba(190,42,42,0.65)', 'rgba(191,80,80,0.1)', 'rgba(242,23,23,1)'],
      ],
    };
  },
};
</script>

<style></style>
